require('./PagePaytransfer.styl');

const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const { Group, TextField, SelectField ,Button, Boxs, Toast} = SaltUI;
const {HBox, Box} = Boxs;
import Addpersonfield from 'components/addpersonfield'
const Fileselect = require('components/fileselect')
const classNames = require("classnames")

var formName = [{label:'所属支付计划',name:'payplan',mark:0},{label:'所属支付节点',name:'paypointer',mark:0},{label:'支付比例',name:'payProportion',mark:1},{label:'支付金额',name:'payMoney',mark:1},{label:'是否存在扣款',name:'isDeduction',mark:0},{label:'扣款比例',name:'Perdeductions',mark:1},{label:'扣款金额',name:'deductionsMoney',mark:1},{label:'实际支付金额',name:'actualPayment',mark:1},{label:'乙方对接人联系方式',name:'contactWay',mark:0},{label:'短信／邮箱',name:'connact',mark:1},{label:'支付方财务',name:'payFinance',mark:1}]
class Paytransfer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            approvers: {},
            upfileName: [],
            Perdeductions:''
        };
        this.isDeductionAll = [
            {value: 0, text: '是'},
            {value: 1, text: '否'},
        ];
        this.contactWayAll = [
            {value: 0, text: '短信'},
            {value: 1, text: '邮箱'},
        ];
        this.content = {};
        this.approvers = {};
        this.appUnionid = [];
        this.csrUnionid = [];
    }
    handleTextChange(name, newValue) {
        if(name == 'payplan'){
            this.currNum = newValue.value;
            Actions.check(newValue.text,this.state.paypointeAll[newValue.value])
        }
        if(name == 'paypointer'){
            var isDeduction = {}
            if(this.state.perdeductionsAll[this.currNum][newValue.value] && parseInt(this.state.perdeductionsAll[this.currNum][newValue.value]) > 0){
                isDeduction = {value: 0, text: '是'}
            }else{
                isDeduction = {value: 1, text: '否'}
            }
            this.setState({
                payProportion: this.state.payProportionAll[this.currNum][newValue.value],
                Perdeductions: this.state.perdeductionsAll[this.currNum][newValue.value],
                payMoney: this.state.payMoneyAll[this.currNum][newValue.value],
                deductionsMoney: this.state.deductionsMoneyAll[this.currNum][newValue.value],
                isDeduction: isDeduction
            });
            this.payPointerCurrNum = newValue.value;
        }
        this.setState({
            [name]: newValue
            });
    }
    handleBlur(name, newValue){
        var reg = new RegExp("^(\\d|[1-9]\\d|100)%$")
        var phone = new RegExp(/^\d+$/)
        var mail = new RegExp(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/)
        if(name == "Perdeductions" && (newValue && !reg.test(newValue))){
            Toast.show({
                type: 'error',
                content: "请填写100以内的百分比数字,例如：65%",
            });
        }else if(name == "connact"){
            if(this.state.contactWay.value == 0){
                !phone.test(newValue) && Toast.show({
                    type: 'error',
                    content: "请输入有效的号码",
                });
            }else{
                !mail.test(newValue) && Toast.show({
                    type: 'error',
                    content: "请输入有效的邮箱地址",
                });
            }
        }
    }
    handleAddpersonCb(names){//审批人获取
        this.content.spr = names
    }
    handleAddpersonCs(names){//抄送人获取
        this.content.csr = names
    }
    handleAddpersonUnionid(unionids){
        this.content.approvers_id = unionids
    }
    handlecsrUnionid(unionids){
        this.content.cc_list_id = unionids
    }
    formdata(){//表单提交
        var formdata = {};
        var boo = false;
        for(var i=0; i<formName.length; i++){
            if(!(formName[i].name == "Perdeductions" || formName[i].name == "deductionsMoney") && !this.state[formName[i].name]){
                boo = false;
                Toast.show({
                    type: 'error',
                    content: formName[i].label + "不能为空",
                  });
                break;
            }else{
                boo = true;
                formdata[formName[i].name] = this.state[formName[i].name]["text"] ? this.state[formName[i].name].text : this.state[formName[i].name];
            }
        }
        if (!this.state.path_name) {
            Toast.show({
                type: 'error',
                content: `文件存储区域不能为空`
            });
            return
        }
        if(boo){
            this.content.folder_id =  this.state.folder_id
            this.content.upfileName = JSON.stringify(this.refs.fileselect.fileData)
            this.content = Object.assign(this.content,{proNum:this.state.proNumAll[this.currNum],proj_webhook:this.state.webhookAll[this.currNum],payplanId:this.state.process_id[this.currNum]})
            formdata.payProportion = this.state.payProportion
            if(this.props.pagedata){//若为变更申请则pagedata不为空
                Actions.sendForm({ node: formName,data: formdata,pagedata: this.props.pagedata,edit: this.props.edit},this.content,boo);
            }else{
                Actions.sendForm({ node: formName,data: formdata},this.content);
            }
        }
    }
    setPathName(path_name){
        this.setState({path_name})
    }
     //获取文件组件数据
    //  getFileData(type,data){
    //     this.content.upfileName = JSON.stringify(data)
    // }


    render() {
        let t = this;
        return (
            <div className="paytransfer myform">
               <Group.List >
                    <SelectField
                        label="所属支付计划"
                        placeholder="请选择"
                        options={t.state.proNameAll}
                        value={t.state.payplan}
                        readOnly={this.props.edit}
                        onSelect={t.handleTextChange.bind(t, 'payplan')}
                    />
                </Group.List>
                <Group.List >
                    <SelectField
                        label="所属支付节点"
                        placeholder="请选择"
                        options={t.state.paypointeCurr}
                        value={t.state.paypointer}
                        readOnly={this.props.edit}
                        onSelect={t.handleTextChange.bind(t, 'paypointer')}
                    />
                    <TextField
                        label="支付比例"
                        value={t.state.payProportion}
                        readOnly={true}
                    />
                    <TextField
                        label="支付金额"
                        value={t.state.payMoney}
                        readOnly={true}
                    />
                </Group.List>
                <Group.List>
                    <SelectField
                        label="是否存在扣款"
                        placeholder="请选择"
                        options={t.isDeductionAll}
                        value={t.state.isDeduction}
                        readOnly={this.props.edit}
                        onSelect={t.handleTextChange.bind(t, 'isDeduction')}
                    />
                    <TextField
                        label="扣款比例"
                        placeholder="非必填"
                        value={t.state.Perdeductions}
                        readOnly={this.props.edit}
                        onChange={t.handleTextChange.bind(t, 'Perdeductions')}
                        onBlur={t.handleBlur.bind(t, 'Perdeductions')}
                    />
                    <TextField
                        label="扣款金额"
                        placeholder="非必填"
                        value={t.state.deductionsMoney}
                        readOnly={true}
                    />
                </Group.List>
                <Group.List>
                    <TextField
                        label="实际支付金额"
                        value={t.state.actualPayment}
                        readOnly={this.props.edit}
                        onChange={t.handleTextChange.bind(t, 'actualPayment')}
                    />
                    <SelectField
                        label="乙方对接人联系方式"
                        placeholder="请选择"
                        options={t.contactWayAll}
                        value={t.state.contactWay}
                        readOnly={this.props.edit}
                        onSelect={t.handleTextChange.bind(t, 'contactWay')}
                    />
                </Group.List>
                <Group.List >
                    <TextField
                        label="短信／邮箱"
                        value={t.state.connact}
                        readOnly={this.props.edit}
                        onChange={t.handleTextChange.bind(t, 'connact')}
                        onBlur={t.handleBlur.bind(t, 'connact')}
                    />
                    <TextField
                        label="支付方财务"
                        value={t.state.payFinance}
                        readOnly={this.props.edit}
                        onChange={t.handleTextChange.bind(t, 'payFinance')}
                    />
                </Group.List>
                <Fileselect 
                    ref='fileselect'
                    upfileName={this.state.upfileName}
                    proName={this.state.payplan}
                    edit={this.props.edit}
                    folder_id={this.state.folder_id}
                    process_folder={true}//是不是需要审批通过才存储文件
                    pathdata={this.state.pathdata}
                    path_name={this.state.path_name}
                    setPathName={this.setPathName.bind(this)}
                    message = "payment-paytransfer"
                    // getFileData={this.getFileData.bind(this)}
                />
                <Group.List>
                    <Addpersonfield 
                        label={"发送给：甲方 -- 财务"}
                        cb={t.handleAddpersonCb.bind(t)}
                        union={t.handleAddpersonUnionid.bind(t)}
                        approvers={t.state.approvers}
                        approvers_id={t.state.approvers_id}
                        maxLength="10"/>
                </Group.List> 
                <Group.List>
                    <Addpersonfield label="抄送人"
                        cb={t.handleAddpersonCs.bind(t)}
                        union={t.handlecsrUnionid.bind(t)}
                        approvers={t.state.cc_list}
                        approvers_id={t.state.cc_list_id}
                        maxLength="10"/>
                </Group.List> 
                <Button type="primary" className="submitBtn" onClick={t.formdata.bind(t)}>提交</Button>
            </div>
        );
    }

    componentWillMount() {
        var pagedata = {};
        if(this.props.pagedata){
            pagedata.proName = this.props.pagedata.proName;
            pagedata.proNum = this.props.pagedata.proNum;
            pagedata.change_id = this.props.pagedata.process_id;
            pagedata.folder_id = this.props.pagedata.folder_id;
            for(let i=0; i<this.props.pagedata.node_info.length; i++){
                if(this.props.pagedata.node_info[i].name == "上传附件"){
                    try{
                        pagedata.upfileName = JSON.parse(this.props.pagedata.node_info[i].value);
                        pagedata.path_name = pagedata.upfileName[0].selected_folder_pathname;
                    }catch(e){
                        pagedata.upfileName = [];
                    }
                }
                for(let j=0; j<formName.length; j++){
                    if(this.props.pagedata.node_info[i].name == formName[j].label){
                        if(formName[i].mark == 0){
                            pagedata[formName[j].name] = {value: 0, text: this.props.pagedata.node_info[i].value};
                        }else{
                            pagedata[formName[j].name] = this.props.pagedata.node_info[i].value;
                        }
                    }
                }
            }
        }
        Object.assign(this.state,pagedata)
    }

    componentDidMount() {
        Actions.fetch()
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.pagedata.approvers && nextProps.pagedata.approvers instanceof Array)
            this.setState({
                approvers: nextProps.pagedata.approvers,
                approvers_id: nextProps.pagedata.approvers_id,
            });
        else if (nextProps.pagedata.approvers && typeof nextProps.pagedata.approvers == 'string')
            this.setState({
                approvers: [nextProps.pagedata.approvers],
                approvers_id: [nextProps.pagedata.approvers_id]
            });
        if (nextProps.pagedata.cc_list && nextProps.pagedata.cc_list instanceof Array)
            this.setState({
                cc_list: nextProps.pagedata.cc_list,
                cc_list_id: nextProps.pagedata.cc_list_id
            });
        else if (nextProps.pagedata.cc_list && typeof nextProps.pagedata.cc_list == 'string')
            this.setState({
                cc_list: [nextProps.pagedata.cc_list],
                cc_list_id: [nextProps.pagedata.cc_list_id]
            })
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Paytransfer, Reflux.connect(Store));

module.exports = Paytransfer;
